<template>
  <div class="dashboard-container">
    <!-- 数据概览 - 两个一行 -->
    <div class="data-overview">
      <el-row :gutter="20">
        <el-col
          v-for="item in overviewData"
          :key="item.title"
          :span="12"
          class="card-col"
        >
          <div class="stat-card" style="box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);">
            <div class="card-content">
              <div class="card-icon" :style="{ backgroundColor: item.color }">
                <component :is="item.icon" class="icon" />
              </div>
              <div class="card-info">
                <div class="number">{{ item.value }}</div>
                <div class="title">{{ item.title }}</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 趋势分析 -->
    <div class="visualization-section">
      <div class="chart-card">
        <div class="chart-header">
          <span class="chart-title">失踪人口趋势分析</span>
          <div class="time-range">2019-2023</div>
        </div>
        <div ref="trendChart" class="chart-container"></div>
      </div>
    </div>

    <!-- 特征分布 -->
    <div class="visualization-section">
      <div class="chart-card">
        <div class="chart-header">
          <span class="chart-title">人口特征分布</span>
          <div>
            <el-button
              :type="pieType === 'age' ? 'danger' : 'info'"
              @click="pieType = 'age'; initPieChart()"
            >
              年龄分布
            </el-button>
            <el-button
              :type="pieType === 'gender' ? 'danger' : 'info'"
              @click="pieType = 'gender'; initPieChart()"
            >
              性别分布
            </el-button>
          </div>
        </div>
        <div ref="pieChart" class="chart-container"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import {
  Search,
  User,
  Present,
  DocumentAdd,
} from '@element-plus/icons-vue'

// 类型定义
interface OverviewData {
  title: string
  value: string
  icon: any
  color: string
}

// 响应式数据
const pieType = ref<'age' | 'gender'>('age')
const trendChart = ref<HTMLElement>()
const pieChart = ref<HTMLElement>()
let trendChartInstance: echarts.ECharts | null = null
let pieChartInstance: echarts.ECharts | null = null

// 数据配置
const overviewData: OverviewData[] = [
  { title: '总失踪人口', value: '23,456', icon: Search, color: '#ffa39e' },
  { title: '今年新增', value: '2,345', icon: User, color: '#f5222d' },
  { title: '已找回人口', value: '18,900', icon: Present, color: '#a8071a' },
  { title: '未解决案件', value: '4,556', icon: DocumentAdd, color: '#5c0011' }
]

// 图表初始化
onMounted(() => {
  initTrendChart()
  initPieChart()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  if (trendChartInstance) {
    trendChartInstance.dispose()
  }
  if (pieChartInstance) {
    pieChartInstance.dispose()
  }
})

const handleResize = () => {
  if (trendChartInstance) {
    trendChartInstance.resize()
  }
  if (pieChartInstance) {
    pieChartInstance.resize()
  }
}

const initTrendChart = () => {
  trendChartInstance = echarts.init(trendChart.value!)
  const option = {
    color: ['#f56c6c'],
    grid: {
      left: '1%',
      right: '1%',
      bottom: '2%',
      top: '9%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['2019', '2020', '2021', '2022', '2023'],
      axisLine: {
        lineStyle: {
          color: '#666'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#666'
        }
      }
    },
    series: [{
      data: [820, 932, 901, 1534, 1290],
      type: 'line',
      smooth: true,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#f56c6c80' },
          { offset: 1, color: '#f56c6c10' }
        ])
      },
      lineStyle: {
        width: 3
      }
    }]
  }
  trendChartInstance.setOption(option)
}

const initPieChart = () => {
  pieChartInstance = echarts.init(pieChart.value!)
  const option = {
    color: ['#ff7875', '#cf1322', '#820014'],
    tooltip: {
      trigger: 'item'
    },
    series: [{
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '50%'],
      data: pieType.value === 'age'
        ? [
            { value: 1048, name: '未成年人' },
            { value: 735, name: '青年(18-35)' },
            { value: 580, name: '中老年' }
          ]
        : [
            { value: 600, name: '男性' },
            { value: 400, name: '女性' }
          ],
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      }
    }]
  }
  pieChartInstance.setOption(option)
}
</script>

<style scoped lang="scss">
.dashboard-container {
  padding: 10px 0;
  border-radius: 8px;
  height: 100%;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgb(245, 76, 77) transparent;
  display: flex;
  flex-direction: column;
}

// 数据概览卡片
.data-overview {
  .card-col {
    padding: 5px;
  }
  margin-bottom: 10px;
  .stat-card {
    transition: transform 0.3s;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    &:hover {
      transform: translateY(-5px);
    }
  }

  .card-content {
    display: flex;
    align-items: center;
    .card-icon {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;

      .icon {
        width: 24px;
        height: 24px;
        color: white;
      }
    }

    .card-info {
      .number {
        font-size: 24px;
        font-weight: 700;
        color: #f56c6c;
        margin-bottom: 4px;
      }

      .title {
        font-size: 14px;
      }
    }
  }
}

// 图表卡片
.visualization-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;

  .chart-card {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    
    .chart-header {
      background-color: #f54c4d;
      padding: 8px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .chart-title {
        font-size: 18px;
        font-weight: 600;
      }

      .time-range {
        font-size: 14px;
        opacity: 0.9;
      }
    }

    .chart-container {
      flex: 1;
      min-height: 0;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

// 小屏幕适配
@media (max-width: 1280px) {
  .visualization-section {
    min-height: 400px;
    
    .chart-card {
      min-height: 370px;
      
      .chart-container {
        min-height: 350px;
      }
    }
  }
}

// 自定义 el-radio-button 颜色
:deep(.el-radio-button) {
  color: red; // 设置文字颜色为红色
}

:deep(.el-radio-button.is-checked) {
  background-color: red; // 设置选中时的背景颜色为红色
  border-color: red; // 设置边框颜色为红色
}
</style>
